<template>
	<view>
		<view class="" style="display: flex;justify-content: space-between;align-items: center;">
			<!-- 头像 左-->
			<view class="touxiang_left">
				<u-avatar class="avartar_left" :src="newItem.userPic"></u-avatar>
			</view>
			<!-- 消息内容 中 -->
			<view class="content_center" style="padding-right: 17%;flex:1;">
				<!-- 用户名字 -->
				<view class="user_name" style="display: flex;margin-top: 20px;">
					<view class="" style="font-weight: bold;">
						{{newItem.nickName}}
					</view>

					<view class="tip" style="margin-left: 10px;color: aquamarine;" v-if="newItem.isSuccess">
						<u-icon style="margin-left: 8px;" size="30" name="checkbox-mark"></u-icon>
						交易成功
					</view>
				</view>
				<!-- 消息内容 -->
				<view class="user_content" v-if="newItem.newsCount">
					<view class="ellipsis" style="color: #ccc;font-size: 16px;margin-top: 4px;">
						[{{newItem.newsCount}}条]  {{newItem.content}}
					</view>
				</view>
				<view class="user_content" v-else>
					<view class="ellipsis" style="color: #ccc;font-size: 16px;margin-top: 4px;">
						{{newItem.content}}
					</view>
				</view>

				<!-- 消息时间 -->
				<view class="user_time" style="margin-top: 2px;">
					<p style="font-size: 14px;color: silver;">{{newItem.createTime}}</p>
				</view>
			</view>

			<!-- 商品图片 右 -->
			<view class="produce_right" style="margin-right: 10px;align-items: center;">
				<image class="imageright" :src="newItem.skuImg" mode=""></image>
			</view>
		</view>

		<view style="margin-left: 30px;height: 1px;width: 70%; background-color: rgba(128, 128, 128, 0.1);"></view>
	</view>
</template>

<script>
	
	export default{
		props:{
			newItem:{
				type:Object
			}
		}
		,
		data(){
			return{
				
			}
		}
	}

</script>

<style lang="scss" scoped>
	.touxiang_left {
		margin: 20px;

		.avartar_left {

			height: 60px;
			height: 60px;
		}
	}

	.imageright {
		margin-right: 10px;
		width: 70px;
		height: 70px;
		border-radius: 20px;
	}

	.ellipsis {
		width: 7em;
		white-space: nowrap;
		overflow: hidden;

	}
</style>